<!--
 * @Author: lzz
 * @Date: 2024-07-01 19:03:57
 * @LastEditTime: 2024-07-17 16:02:16
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程详情</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/details.css" />
  </head>
  <body>
    <div class="container">
      <div class="lesson">
        <div class="lesson-tip">
          <a href="https://ke.qq.com/course/list">全部课程</a>
          <span
            ><svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.636 20.435a1 1 0 0 0 1.414 0l4.95-4.95a4 4 0 0 0 0-5.656l-4.95-4.95a1 1 0 0 0-1.414 1.414l4.95 4.95a2 2 0 0 1 0 2.828l-4.95 4.95a1 1 0 0 0 0 1.414Z"
                fill="currentColor"
              ></path>
            </svg>
          </span>
          <a href="https://ke.qq.com/course/list?mt=1001">IT·互联网</a>
          <span
            ><svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.636 20.435a1 1 0 0 0 1.414 0l4.95-4.95a4 4 0 0 0 0-5.656l-4.95-4.95a1 1 0 0 0-1.414 1.414l4.95 4.95a2 2 0 0 1 0 2.828l-4.95 4.95a1 1 0 0 0 0 1.414Z"
                fill="currentColor"
              ></path></svg></span
          ><a href="https://ke.qq.com/course/list?mt=1001&amp;st=2004"
            >前端开发</a
          ><span
            ><svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.636 20.435a1 1 0 0 0 1.414 0l4.95-4.95a4 4 0 0 0 0-5.656l-4.95-4.95a1 1 0 0 0-1.414 1.414l4.95 4.95a2 2 0 0 1 0 2.828l-4.95 4.95a1 1 0 0 0 0 1.414Z"
                fill="currentColor"
              ></path></svg></span
          ><a
            href="https://ke.qq.com/course/list?mt=1001&amp;st=2004&amp;tt=3353"
            >前端零基础</a
          ><span
            ><svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.636 20.435a1 1 0 0 0 1.414 0l4.95-4.95a4 4 0 0 0 0-5.656l-4.95-4.95a1 1 0 0 0-1.414 1.414l4.95 4.95a2 2 0 0 1 0 2.828l-4.95 4.95a1 1 0 0 0 0 1.414Z"
                fill="currentColor"
              ></path></svg></span
          ><a href="https://ke.qq.com/course/2588158"
            >2023 Vue零基础到实战开发宝典</a
          >
        </div>
        <div class="lesson-play">
          <div class="lesson-player">
            <img src="./img/to-left.png" alt="" />
          </div>
          <div class="lesson-play-list">
            <div class="lesson-play-list-title">
              <span>目录 (16)</span>
              <img src="./img/to-right.png" alt="">
            </div>
            <div class="lesson-play-list-item-wrapper">
              <div class="lesson-play-list-item-title">01.Vue基础知识</div>
              <div class="lesson-play-list-item active">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play-active.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item-title">02.Vue进阶知识</div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
              <div class="lesson-play-list-item">
                <div class="lesson-play-list-item-left">
                  <img src="./img/play.png" alt="" />
                </div>
                <div class="lesson-play-list-item-right">
                  <div class="lesson-play-list-item-right-title">
                    01.从前端到Vue
                  </div>
                  <div class="lesson-play-list-item-right-time">32分钟</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lesson-title">
          <p>2023 Vue零基础到实战开发宝典</p>
        </div>
        <div class="lesson-tag">
          <span class="lesson-tag-item">HTML</span>
          <span class="lesson-tag-item">HTML</span>
          <span class="lesson-tag-item">CSS</span>
          <span class="lesson-tag-item">HTML</span>
          <span class="lesson-tag-item">VUE</span>
        </div>
      </div>
      <div class="lesson-intro">
        <div class="intro">
          <div class="intro-left">
            <div class="intro-left-title">
              <span class="active">课程介绍</span>
              <span>课程目录</span>
            </div>
            <div class="lesson-intro-tab">
              <div class="intro-left-item">
                <div class="intro-left-item-title">你将获得</div>
                <div class="intro-left-item-get">Vue基础技术应用与入门能力</div>
                <div class="intro-left-item-get">Vue基础技术应用与入门能力</div>
                <div class="intro-left-item-get">Vue基础技术应用与入门能力</div>
              </div>
              <div class="intro-left-item">
                <div class="intro-left-item-title">课程详情</div>
                <div class="intro-left-item-details">这里详细图文介绍</div>
              </div>
            </div>
            <div class="lesson-list-tab">
              <div class="lesson-list active">
                <div class="lesson-list-title">
                  <span>01.</span>
                  <span>Vue基础知识1 （6节）</span>
                  <img src="./img/arrow-top.png" alt="" srcset="" />
                </div>
                <div class="lesson-list-item-wrapper">
                  <div class="lesson-list-item">
                    <div class="lesson-list-item-left">
                      <img src="./img/play.png" alt="" />
                    </div>
                    <div class="lesson-list-item-right">
                      <div class="lesson-list-item-right-title">
                        01.从前端到Vue
                      </div>
                      <div class="lesson-list-item-right-time">32分钟</div>
                    </div>
                  </div>
                  <div class="lesson-list-item">
                    <div class="lesson-list-item-left">
                      <img src="./img/play.png" alt="" />
                    </div>
                    <div class="lesson-list-item-right">
                      <div class="lesson-list-item-right-title">
                        01.从前端到Vue
                      </div>
                      <div class="lesson-list-item-right-time">32分钟</div>
                    </div>
                  </div>
                  <div class="lesson-list-item">
                    <div class="lesson-list-item-left">
                      <img src="./img/play.png" alt="" />
                    </div>
                    <div class="lesson-list-item-right">
                      <div class="lesson-list-item-right-title">
                        01.从前端到Vue
                      </div>
                      <div class="lesson-list-item-right-time">32分钟</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lesson-list">
                <div class="lesson-list-title">
                  <span>01.</span>
                  <span>Vue基础知识1 （6节）</span>
                  <img src="./img/arrow-down.png" alt="" srcset="" />
                </div>
                <div class="lesson-list-item-wrapper">
                  <div class="lesson-list-item">
                    <div class="lesson-list-item-left">
                      <img src="./img/play.png" alt="" />
                    </div>
                    <div class="lesson-list-item-right">
                      <div class="lesson-list-item-right-title">
                        01.从前端到Vue
                      </div>
                      <div class="lesson-list-item-right-time">32分钟</div>
                    </div>
                  </div>
                  <div class="lesson-list-item">
                    <div class="lesson-list-item-left">
                      <img src="./img/play.png" alt="" />
                    </div>
                    <div class="lesson-list-item-right">
                      <div class="lesson-list-item-right-title">
                        01.从前端到Vue
                      </div>
                      <div class="lesson-list-item-right-time">32分钟</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lesson-list">
                <div class="lesson-list-title">
                  <span>01.</span>
                  <span>Vue基础知识1 （6节）</span>
                  <img src="./img/arrow-down.png" alt="" srcset="" />
                </div>
                <div class="lesson-list-item-wrapper"></div>
              </div>
              <div class="lesson-list"></div>
              <div class="lesson-list"></div>
            </div>
          </div>
          <div class="intro-right">
            <div class="title">相关体验课</div>
            <div class="rela-lesson">
              <div class="rela-lesson-imger"></div>
              <div class="rela-lesson-content">
                <p>Web前端工程师培养计划 LEVEL ONE</p>
                <span>402人购买</span>
                <em>￥7799.00</em>
              </div>
            </div>
            <div class="rela-lesson">
              <div class="rela-lesson-imger"></div>
              <div class="rela-lesson-content">
                <p>Web前端工程师培养计划 LEVEL ONE</p>
                <span>402人购买</span>
                <em>￥7799.00</em>
              </div>
            </div>
            <div class="rela-lesson">
              <div class="rela-lesson-imger"></div>
              <div class="rela-lesson-content">
                <p>Web前端工程师培养计划 LEVEL ONE</p>
                <span>402人购买</span>
                <em>￥7799.00</em>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
      $(".lesson-play-list-item").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".lesson-play-list-item-left img").attr("src", "./img/play.png");
        $(this)
          .find(".lesson-play-list-item-left img")
          .attr("src", "./img/play-active.png");
      });

      $(".intro-left-title span").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".lesson-intro-tab").hide();
        $(".lesson-list-tab").hide();
        if ($(this).html() == "课程介绍") {
          $(".lesson-intro-tab").show();
        } else {
          $(".lesson-list-tab").show();
        }
      });
      $(".lesson-list").click(function () {
        if ($(this).hasClass("active")) {
          $(this)
            .find(".lesson-list-title img")
            .attr("src", "./img/arrow-top.png");
          $(this).removeClass("active");
        } else {
          $(this).addClass("active").siblings().removeClass("active");
          $(".lesson-list-title img").attr("src", "./img/arrow-top.png");
          $(this)
            .find(".lesson-list-title img")
            .attr("src", "./img/arrow-down.png");
        }
      });
      $(".lesson-player > img").click(function () {
        $(".lesson-play-list").css({
          display: "block",
          position: "absolute",
          top: "0",
          left: "30px",
        });
      });
      $(".lesson-play-list-title img").click(function(){
        $(".lesson-play-list").css({
          display: "none",
        });
      })
    </script>
  </body>
</html>
